<template>
  <view class="view-check-list">
    <view class="view-check">
      <web-view
        :src="fileUrl"
        style="width: 100%; height: 100%"
        :fullscreen="false"
      ></web-view>
    </view>
    <view
      v-if="signs.length > 0"
      class="signs"
      :style="{
        height: signsHeight + '%',
        bottom: readonly ? '0%' : bottomHeight + '%',
      }"
    >
      <view v-for="(item, index) in signs" :key="index" class="sign flex-1">
        <view class="hidden-title">{{
          item.personType === '2' ? '驾驶员签字' : '押运员签字'
        }}</view>
        <view class="img-sign background-white">
          <image
            :src="`${staticUrl}${item.signUrl}`"
            mode="aspectFit"
            class="work-img"
            @click="handlePreviewImage(`${staticUrl}${item.signUrl}`)"
          />
        </view>
      </view>
    </view>
    <view class="submit-group" v-if="!readonly">
      <button class="u-button" type="primary" :ripple="true" @click="submit">
        签字
      </button>
    </view>
    <Signature
      ref="signature"
      v-model="createPersonSign.signUrl"
      auto-upload
      @success="onSignatureSuccess"
      @close="closeSignature"
    />
  </view>
</template>

<script>
import config from '@/config';
import { encode } from '@/utils/js-base64.js';
import Signature from '@/pages/jobSlip/components/ContinueSign.vue';
import { staticUrl } from '@/config.js';
import { getWorkDetail } from '@/api/dock/trucks';
import { bscDockWorkSignObj, bscDockWorkPersonType } from '@/utils/constant.js';
var wv; //计划创建的webview
export default {
  components: {
    Signature,
  },
  data() {
    return {
      fileUrl: '',
      readonly: false,
      staticUrl,
      bottomHeight: 15,
      signsHeight: 0,
      bscDockWorkSignObj,
      bscDockWorkPersonType,
      formData: {
        inspectProjectResps: [],
      },
      subWorkId: '',
      signs: [],
      createPersonSign: {
        signObject: bscDockWorkSignObj.EMERGENCYPLAN,
        signUrl: '',
      },
      height: '',
    };
  },
  onReady() {},
  onLoad(params) {
    // #ifdef APP-PLUS
    var currentWebview = this.$scope.$getAppWebview();
    // #endif
    const url = params.url;
    let _url = url.replace('/minio//', '/minio/');
    this.fileUrl = `${
      config.staticUrl
    }/file-view/onlinePreview?url=${encodeURIComponent(
      encode(_url)
    )}&officePreviewType=pdf`;
    this.readonly = params.readonly ? true : false;
    if (params.subWorkId) {
      this.subWorkId = params.subWorkId;
      getWorkDetail(this.subWorkId).then(({ data }) => {
        this.formData =
          data.dockWorkInfoResp.formType === '1'
            ? data.dockFormLoadingResp
            : data.dockFormUnloadResp;
        this.signs = this.formData.workSignRespMap[
          bscDockWorkSignObj.EMERGENCYPLAN
        ]
          ? this.formData.workSignRespMap[bscDockWorkSignObj.EMERGENCYPLAN]
          : [];
        this.signsHeight = this.signs.length > 2 ? 42 : this.signs.length * 21;
        // #ifdef APP-PLUS
        let that = this;
        setTimeout(function () {
          wv = currentWebview.children()[0];
          let height = 0;
          if (!that.readonly) {
            height = that.bottomHeight;
          }
          if (that.signs.length > 0) {
            height += that.signsHeight;
          }
          that.height = height + '%';
          wv.setStyle({ bottom: height + '%' });
        }, 1000); //如果是页面初始化调用时，需要延时一下
        // #endif
      });
    } else {
      // #ifdef APP-PLUS
      let that = this;
      setTimeout(function () {
        wv = currentWebview.children()[0];
        let height = '';
        if (!that.readonly) {
          height = that.bottomHeight + '%';
        }
        that.height = height;
        wv.setStyle({ bottom: height });
      }, 1000); //如果是页面初始化调用时，需要延时一下
      // #endif
    }
  },
  methods: {
    onSignatureSuccess() {
      this._save();
    },
    closeSignature() {
      // #ifdef APP-PLUS
      wv.setStyle({ bottom: this.height });
      // #endif
    },
    submit() {
      // #ifdef APP-PLUS
      wv.setStyle({ bottom: '40%' });
      // #endif
      this.$refs.signature.open();
    },
    async _save() {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('callback:success', {
        createPersonSign: this.createPersonSign,
      });
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.view-check-list {
  display: flex;
  .view-check {
    margin-bottom: 110px;
    height: 100vh;
    width: 100vh;
  }
  .signs {
    padding: 0 20rpx;
    background: #f5f5f5;
    z-index: 9;
    display: flex;
    position: fixed;
    flex-direction: column;
    bottom: var(--window-bottom);
    width: 100%;
    .sign {
      display: flex;
      flex-direction: column;
    }
    .img-sign {
      display: flex;
      justify-content: center;
      background-color: white;
      flex: 1;
      .work-img {
        width: 400rpx;
        height: 100%;
      }
    }
    .hidden-title {
      background: #f5f5f5;
      padding: 20rpx 30rpx;
      color: #999;
    }
  }
  .submit-group {
    height: 15%;
    background: #fff;
    padding: 30px;
  }
}
</style>
